<template>
  <div class="page-container gallery">
    <SearchForm
      :search-list="searchList"
      :search-params="searchParams"
      @search="onSearch"
      @reset="onReset"
    />
    <div class="table-box" style="overflow:auto;">
      <FileUpload v-model="fileList" @upload="onUpload" :deleteFile="deleteFile" multiple/>
    </div>
    <Add ref="addFormRef" @get-page="initData" />
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { http } from '@/api'
import Add from './add.vue'
export default {
  components: {
    Add,
  },
  mixins: [crud],
  data() {
    return {
      request: http.gallery,
      searchList: [
        {
          key: 'location',
          name: 'select',
          clearable: false,
          label: '分类',
          options: [
            { label: '船相关照片', value: '船相关照片' },
            { label: '钓鱼场景或鱼获照片', value: '钓鱼场景或鱼获照片' },
            { label: '潜水照片', value: '潜水照片' },
            { label: '自然风光野生动物', value: '自然风光野生动物' },
            { label: 'Happy hour 珍贵记忆', value: '珍贵记忆' }
          ]
        }
      ],
      searchParams: {
        location: '船相关照片'
      },
      columns: [
        { prop: 'location', label: '分类' },
        { prop: 'url', label: '图片', type: 'image' },
        { prop: 'status', label: '状态', type: 'select', mapping: { 1: '启用', 0: '禁用' } },
        { prop: 'create_time', label: '创建时间' }
      ],
      tableData: [
      ],
      fileList: '',
      defaultParams: {
        pageSize: 9999
      }
    }
  },
  methods: {
    formatTableData(data) {
      data.forEach(el => {

      })
      console.log('data',data)
      this.fileList = data.map(item => item.url).join(',')
    },
    onUpload(url) {
      http.gallery.create(null, {
        url: url,
        location: this.searchParams.location
      })
    },
    deleteFile(file, callback) {
      let find = this.tableData.find(item => item.url === file)
      if (find) {
        http.gallery.delete(find.id).then(() => {
          callback()
        })
      } else {
        callback()
      }
    },
    onAdd() {
      this.$refs.addFormRef.open()
    },
    onEdit(row) {
      this.$refs.addFormRef.open(row)
    }
  }
}
</script>

<style lang="scss">
.gallery {
  .img-upload-box {
    display: flex;
    flex-wrap: wrap;
    .el-upload-list {
      display: none;
    }
    .avatar-uploader {
      width: 128px;
      height: 128px;
      margin-right: 8px;
      margin-bottom: 8px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      position: relative;
      .close-icon {
        position: absolute;
        right: -8px;
        top: -8px;
        font-size: 24px;
        color: #0bc162;
        cursor: pointer;
      }
      &.active {
        cursor: pointer;
        .close-icon {
          display: none;
        }
      }
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 128px;
      height: 128px;
      line-height: 140px !important;
      text-align: center;
    }
    .avatar {
      width: 128px;
      height: 128px;
      display: block;
    }
  }
}
</style>
